<template>
	<div class="music wrapper">
    <div class="rank-nav">
      <a href="javascript:;" v-for="(musicList, index) in musicLists" :key="index">{{musicList.name}}</a>
    </div>
    <div class="rank-list">
      <img src="https://cn.vuejs.org/images/logo.png" class="rank-logo">
      <div class="rank-desc">222</div>
    </div>
	</div>
</template>

<script>
	export default {
		name: "music",
		data() {
			return {
				musicLists: []
			};
		},
		created() {
			this.axios.get("https://api.apiopen.top/musicRankings").then(res => {
				this.musicLists = res.data.result;
				console.log(this.musicLists);
			});
		}
	};
</script>

<style scoped>
  .rank-nav {
    padding: 50px 0;
    display: flex;
    justify-content: space-around;
  }

  .rank-list {
    overflow: hidden;
  }

  .rank-logo {
    width: 200px;
    float: left;
  }

  .rank-desc {
    width: calc(100% - 250px);
    float: right;
  }
</style>
